<template>
  <div>
    <el-form ref="form" :inline="true" :model="orderQuery" label-width="80px">
      <el-form-item>
        <pickArea :showArea="false" @getSite="setArea2" />
      </el-form-item>
      <el-form-item>
        <el-autocomplete
              v-model="orderQuery.stationName"
              :fetch-suggestions="matchStation"
              placeholder="请输入检测站名称"
              @select="handleSelect"></el-autocomplete>
        <el-button type="primary" @click="handleCurrentChange()">查询</el-button>
        <el-button type="primary" icon="el-icon-edit" @click="addStations()">添加检测站</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="station">
      <el-table-column prop="name" label="检测站名称"></el-table-column>
      <el-table-column prop="liaisonName" label="检测站联系人"></el-table-column>
      <el-table-column prop="liaisonPhone" label="联系人电话"></el-table-column>
      <el-table-column prop="equipmentInfo" label="设备信息"></el-table-column>
      <el-table-column prop="businessHours" label="营业时间"></el-table-column>
      <el-table-column prop label="操作">
        <template v-slot="scope">
          <el-button size="mini" type="primary" @click="getDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="info" @click="alterDetail(scope.row)">修改</el-button>
          <!-- <el-button size="mini" type="danger" @click="deleteDetail(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- -----------详情按钮------------- -->
    <el-dialog
               title="检测站详情"
               :visible.sync="centerDialogView"
               width="60%"
               center>
      <el-descriptions :border="true">
        <el-descriptions-item label="id">{{ stationOrder.id}}</el-descriptions-item>
        <el-descriptions-item label="检测站名称">{{ stationOrder.name }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名">{{stationOrder.liaisonName}}</el-descriptions-item>
        <el-descriptions-item label="联系人电话">{{stationOrder.liaisonPhone}}</el-descriptions-item>
        <el-descriptions-item label="银行名称">{{stationOrder.bankName}}</el-descriptions-item>
        <el-descriptions-item label="银行账号">{{stationOrder.bankAccount }}</el-descriptions-item>
        <el-descriptions-item label="安全检测价格">{{stationOrder.safePrice}}</el-descriptions-item>
        <el-descriptions-item label="设备信息">{{stationOrder.equipmentInfo}}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{stationOrder.businessHours}}</el-descriptions-item>
        <el-descriptions-item label="环境检测价格">{{stationOrder.envPrice}}</el-descriptions-item>
        <el-descriptions-item label="合作价格" v-if="stationOrder.cooperPrice">价格:{{stationOrder.cooperPrice[0].price}}&nbsp;&nbsp;
        百分比:{{stationOrder.cooperPrice[0].percent}}%&nbsp;合作区间:{{stationOrder.cooperPrice[0].min}}~{{stationOrder.cooperPrice[0].max}}</el-descriptions-item>
        <el-descriptions-item label="检测车辆类型">{{ stationOrder.scale}}</el-descriptions-item>
        <el-descriptions-item label="检测站地址">{{stationOrder.province +stationOrder.city +stationOrder.area +stationOrder.address}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- -----------修改按钮------------- -->
    <el-dialog
                title="检测站详情"
                :visible.sync="orderDialogAlter"
                width="71%"
                center>
      <el-descriptions :border="true">
        <el-descriptions-item label="id">{{ alter.id }}</el-descriptions-item>
        <el-descriptions-item label="检测站名称">
          <el-input v-model="alter.name" maxlength="20" ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系人姓名">
          <el-input v-model="alter.liaisonName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系人电话">
          <el-input v-model="alter.liaisonPhone" maxlength="11"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="银行名称">
          <el-input v-model="alter.bankName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="银行账号">
          <el-input v-model="alter.bankAccount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="安全检测价格">
          <el-input v-model="alter.safePrice"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="设备信息">
          <el-input v-model="alter.equipmentInfo"> </el-input>
        </el-descriptions-item>
        <el-descriptions-item label="营业时间" prop="businessHours">
           <el-time-picker
                     is-range
                     v-model="businessHours1"
                     value-format="HH:mm:ss"
                     @change="changeData"
                     range-separator="至"
                     start-placeholder="开始时间"
                     end-placeholder="结束时间"
                     placeholder="选择时间范围">
          </el-time-picker>
          </el-descriptions-item>
        <el-descriptions-item label="检测车辆类型">
          <el-select v-model="alterscale" @change="chooseCar" multiple placeholder="请选择">
            <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="环境检测价格">
          <el-input v-model="alter.envPrice"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="检测站地址" prop="address">
          <pickArea
                    :showArea="true"
                    :imProv="alter.province"
                    :imCity="alter.city"
                    :imdistrict="alter.area"
                    @getSite="setArea" />
          <el-input v-model="alter.address"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <el-button
        class="update-order"
        type="primary"
        @click="updateDetail(alter)">提 交</el-button>
    </el-dialog>
    <!-- ---------------添加司机按钮---------------- -->
    <el-dialog
      title="添加检测站"
      :visible.sync="addDialogStation"
      width="38%"
      center>
      <el-form ref="form" :rules="formRules" :model="form" label-width="80px">
        <el-form-item label="检测站名称" prop="name" >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="liaisonName">
          <el-input v-model="form.liaisonName"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="liaisonPhone">
          <el-input v-model="form.liaisonPhone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankAccount">
          <el-input v-model="form.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="银行名称" prop="bankName">
          <el-input v-model="form.bankName"></el-input>
        </el-form-item>
        <el-form-item label="安全检测价格" prop="safePrice">
          <el-input v-model="form.safePrice"></el-input>
        </el-form-item>
        <el-form-item label="环境检测价格" prop="envPrice">
          <el-input v-model="form.envPrice"></el-input>
        </el-form-item>
        <el-form-item label="检测车辆类型 " prop="scale">
          <el-select v-model="form.scale"  multiple placeholder="请选择">
            <el-option
                     v-for="(item, index) in options"
                     :key="index"
                     :label="item.label"
                     :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备信息" prop="equipmentInfo">
          <el-input v-model="form.equipmentInfo"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="businessHours">
          <el-time-picker
                is-range
                v-model="businessHours"
                value-format="HH:mm:ss"
                @change="chooseData"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="检测站地址" prop="address">
          <pickArea @getSite="setArea1" />
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="creat-order" type="primary" @click="createStation()">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-pagination
      background
      layout="prev,pager, next, jumper"
      :total="total"
      @current-change="handleCurrentPage"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-size="10"></el-pagination>
  </div>
</template>
<script>
import pickArea from "@/components/pickArea.vue";
import area from "../../utils/area";
export default {
  inject: ["reload"],
  components: {
    pickArea,
  },
  data: function () {
    return {
      station: [],
      total: 0,
      currentPage: 1,
      stationOrder: {},
      businessHours:'',
      businessHours1:'',
      tempStation: null,
      centerDialogView: false,
      orderDialogAlter: false,
      addDialogStation: false,
      orderQuery: {
        pageNum: 1,
        pageSize: 10,
        province:'省份',
        city:'城市',
        area:'区域'
      },
      alter: {
        times:[],
      },
      alterscale: [],
      options: [
        {
          value: "小型车",
          label: "小型车",
        },
        {
          value: "中型车",
          label: "中型车",
        },
        {
          value: "大型车",
          label: "大型车",
        },
      ],
      form: {
        address: "",
        area: "",
        bankAccount: "",
        bankName: "",
        businessHours: "",
        city: "",
        envPrice: "",
        equipmentInfo: "",
        id: "",
        liaisonName: "",
        liaisonPhone: "",
        name: "",
        province: "",
        safePrice: "",
        scale: [],
      },
      formRules: {
        name: [
          { required: true, message: "请输入检测站名称", trigger: "blur" },
          { max: 20, message: "长度在20 个字符以内", trigger: "blur" },
        ],
        liaisonName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
        ],
        bankAccount: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        bankName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
        safePrice: [
          { required: true, message: "请输入安全检测价格", trigger: "blur" },
        ],
        envPrice: [
          { required: true, message: "请输入环境检测价格", trigger: "blur" },
        ],
        liaisonPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          { min: 11, message: "长度在 11 个字符", trigger: "blur" },
        ],
        scale: [
          { required: true, message: "请选择检测车辆类型", trigger: "blur" },
        ],
        equipmentInfo: [
          { required: true, message: "请填入设备信息", trigger: "blur" },
        ],
        businessHours: [
          { required: true, message: "请选择营业时间", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请选择并填入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  created: function () {
    this.handleCurrentChange(1);
  },
  methods: {
    handleCurrentChange: async function (val = 1) {
      this.orderQuery.pageNum = val;
      const { data } = await this.$http.get(
        `/testStation/getAllStation?pageNum=${val}&pageSize=10&province=${
          this.orderQuery.province!=="省份"? this.orderQuery.province : ""
        }&city=${
          this.orderQuery.city!=="城市" ? this.orderQuery.city : ""
        }&stationName=${
          this.orderQuery.stationName ? this.orderQuery.stationName : ""
        }`
      );
      if (data.code == 1) {
        this.station = data.object.list;
        this.tempStation = this.tempStation ? this.tempStation : this.station;
        data.object.list.forEach((order) => {
          if (order.cooperPrice)
            order.cooperPrice = JSON.parse(order.cooperPrice);
        })
        this.total = data.object.total;
        this.currentPage = data.object.pageNum;
      } else { 
        this.$message({
          message: data.message,
          type: "error",
        });
      }
    },
    //当前页
    handleCurrentPage(val) {
      this.currentPage = val;
      this.handleCurrentChange(val);
    },
    //每页条数
    handleSizeChange(val) {
      this.orderQuery.pageNum = val;
      this.orderQuery.pageSize = val;
      this.handleCurrentChange(1);
    },
    chooseCar(changeCar){
      this.alter.scale=changeCar.join("")
    },
    chooseData(addData){
      this.form.businessHours = addData[0]+" - "+addData[1]
    },
    changeData(alterData){
       this.alter.times = alterData
       this.alter.businessHours = alterData[0]+" - "+alterData[1]
    },
    // ----页面详情按钮-----
    getDetail: async function (obj) {
      this.stationOrder = obj;
      this.centerDialogView = true;

    },
    // ------ 打开页面修改按钮------
    alterDetail: async function (obj) {
      setTimeout(() => {
        this.alter = obj
        if(obj.businessHours){
          this.businessHours1= obj.businessHours.split(" - ")
        }else{
          this.businessHours1=""
        }
        this.alterscale = [];
        if (obj.scale.includes("小型车")) {
          this.alterscale.push("小型车");
        }
        if (obj.scale.includes("中型车")) {
          this.alterscale.push("中型车");
        }
        if (obj.scale.includes("大型车")) {
          this.alterscale.push("大型车");
        }
      });
      this.orderDialogAlter = true;
    },
    // -------修改提交按钮-----
    updateDetail: async function (obj) {
      // this.alter = obj;
      const { data } = await this.$http.post(
        `/testStation/updateStation`,
        this.alter
      );
      if (data.code == 1) {
        this.$message.success("更新成功");
        this.orderDialogAlter = false;
      } else {
        this.$message.error("更新失败");
      }
    },
    // -----打开添加按钮-------
    addStations: async function () {
      this.addDialogStation = true;
    },
    // -------添加司机-----
    createStation(form) {
      this.add = form;
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.$http.post(`/testStation/addStation`, this.form);
          this.$message.success("添加成功");
          this.addDialogStation = false;
        } else {
          this.$message.error("提交失败，验证不通过");
          return false;
        }
        this.reload();
      });
    },
    //------ 查询--------
    matchStation: async function (stationName, cb) {
      let stations = [];
      this.tempStation.forEach((station) => {
        stations.push({
          id: station.id,
          value: station.name,
        });
      });
      cb(stations);
    },
    // -------删除-------
    // deleteDetail: async function (obj) {
    // },
    handleSelect(item) {
      this.orderQuery.stationName = item.value;
    },
    setArea: function (province, city, area) {
      this.alter.province = province;
      this.alter.city = city;
      this.alter.area = area;
    },
    setArea1: function (province, city, area) {
      this.form.province = province;
      this.form.city = city;
      this.form.area = area;
    },
    setArea2: function (province, city) {
      this.orderQuery.province = province;
      this.orderQuery.city = city;
      this.handleCurrentChange()
    },
  },
};
</script>
<style>
.update-order {
  position: relative;
  left: 50%;
  transform: translate(-50%, 50%);
}
.creat-order {
  position: relative;
  left: 50%;
  transform: translate(-50%, 50%);
}
</style>